<script setup lang="ts">
import {Layout} from '@layout'
import {Menu, useMenuStore, MenuIcon} from "@menu"

const menuStore = useMenuStore()
</script>

<template>
  <div class="index">
    <Layout>
      <template #sider="{isCollapsed, collapsedWidth}">
        <div class="logo">

        </div>
        <Menu
          :collapsed="isCollapsed"
          :collapsed-width="collapsedWidth"
        />
      </template>
      <template #header-left>
        <div class="p-3">
          <n-breadcrumb>
            <n-breadcrumb-item
              v-for="(item) in menuStore.getMenuSelectedPath()"
              :key="item.id"
            >
              <div class="flex items-center gap-2">
                <MenuIcon
                  :icon-type="item.iconType"
                  :icon="item.icon"
                />
                {{ item.name }}
              </div>
            </n-breadcrumb-item>
          </n-breadcrumb>
        </div>
      </template>
      <template #content>
        <div class="box-border w-full h-full p-3">
          <router-view/>
        </div>
      </template>
    </Layout>
  </div>
</template>

<style scoped>

</style>
